<!-- 首页 index.vue -->
<template>
  <view class="index-container">
	  
	  
    <!-- 搜索栏 -->
    <view class="search-bar">
      <uni-icons type="search" size="18" color="#999" />
      <input class="search-input" placeholder="请输入症状或医院名称" />
    </view>
    <!-- 快速问诊按钮 -->
    <view class="quick-action" @click="navigateToChat">
      <image src="/static/icons/stethoscope.png" class="action-icon"/>
      <text>快速问诊</text>
    </view>

    <!-- 附近医院轮播 -->
    <view class="section">
      <view class="section-header">
        <text class="section-title">附近医院</text>
        <text class="more">更多 ></text>
      </view>
      <swiper 
        class="hospital-swiper"
        :autoplay="true"
        :interval="5000"
        :circular="true"
        :indicator-dots="true">
        <swiper-item 
          v-for="(item, index) in hospitals" 
          :key="index">
          <view class="swiper-item">
            <image 
              :src="item.image" 
              class="hospital-image" 
              mode="aspectFill" />
            <view class="hospital-info">
              <text class="hospital-name">{{ item.name }}</text>
              <text class="hospital-distance">距您{{ item.distance }}km</text>
            </view>
          </view>
        </swiper-item>
      </swiper>
    </view>

    <!-- 文章推荐 -->
    <view class="section">
      <view class="section-header">
        <text class="section-title">健康科普</text>
      </view>
      <view class="article-list">
        <navigator 
          v-for="(item, index) in articles" 
          :key="index" 
          class="article-item">
          <image 
            :src="item.cover" 
            class="article-cover" 
            mode="aspectFill" />
          <view class="article-info">
            <text class="article-title">{{ item.title }}</text>
            <text class="article-desc">{{ item.desc }}</text>
          </view>
        </navigator>
      </view>
    </view>
  </view>
</template>

<script setup>
import { ref } from 'vue'
// 快速问诊跳转
const navigateToChat = () => {
  uni.switchTab({ url: '/pages/chat/index' })
}

// 模拟数据
const hospitals = ref([
  {
    name: '协和医院', 
    image: '/static/xieheyiyuan.jpg',
    distance: 1.2
  },
  {
    name: '人民医院', 
    image: '/static/renminyiyuan.jpg',
    distance: 2.5
  },
  {
    name: '中医院', 
    image: '/static/zhongyiyuan.jpg',
    distance: 0.8
  }
])

const articles = ref([
  {
    title: '夏季防暑指南',
    desc: '高温天气下的健康防护要点',
    cover: '/static/fszn.jpg'
  },
  {
    title: '糖尿病饮食管理',
    desc: '科学饮食控制血糖水平',
    cover: '/static/ysgl.jpg'
  }
])
</script>

<style lang="scss">
.index-container {
  padding: 20rpx;
  background: #f5f5f5;
  
  .search-bar {
    display: flex;
    align-items: center;
    padding: 20rpx;
    background: #fff;
    border-radius: 50rpx;
    margin-bottom: 30rpx;
    
    .search-input {
      flex: 1;
      margin-left: 15rpx;
      font-size: 28rpx;
    }
  }

  .quick-action {
    display: flex;
    align-items: center;
    justify-content: center;
    background: #007aff;
    border-radius: 50rpx;
    padding: 20rpx;
    margin-bottom: 30rpx;
    
    .action-icon {
      width: 40rpx;
      height: 40rpx;
      margin-right: 15rpx;
    }
    text {
      color: #fff;
      font-size: 30rpx;
      font-weight: 500;
    }
  }

  .section {
    background: #fff;
    border-radius: 20rpx;
    padding: 30rpx;
    margin-bottom: 30rpx;

    &-header {
      display: flex;
      justify-content: space-between;
      margin-bottom: 20rpx;
      
      .section-title {
        font-size: 32rpx;
        font-weight: bold;
      }
      .more {
        color: #007aff;
        font-size: 26rpx;
      }
    }
  }

  .hospital-swiper {
    height: 400rpx;
    border-radius: 20rpx;
    overflow: hidden;
    
    .swiper-item {
      position: relative;
      height: 100%;
      
      .hospital-image {
        width: 100%;
        height: 100%;
      }
      
      .hospital-info {
        position: absolute;
        bottom: 0;
        left: 0;
        right: 0;
        background: linear-gradient(transparent, rgba(0,0,0,0.6));
        padding: 30rpx;
        
        .hospital-name {
          color: #fff;
          font-size: 34rpx;
          display: block;
          margin-bottom: 10rpx;
        }
        
        .hospital-distance {
          color: rgba(255,255,255,0.8);
          font-size: 24rpx;
        }
      }
    }
  }

  .article-list {
    .article-item {
      display: flex;
      padding: 25rpx 0;
      border-bottom: 1rpx solid #eee;
      
      .article-cover {
        width: 200rpx;
        height: 140rpx;
        border-radius: 10rpx;
        margin-right: 20rpx;
      }
      
      .article-info {
        flex: 1;
        display: flex;
        flex-direction: column;
        justify-content: space-between;
        
        .article-title {
          font-size: 30rpx;
          color: #333;
        }
        
        .article-desc {
          font-size: 24rpx;
          color: #999;
        }
      }
    }
  }
}
</style>